import React from 'react';
import { Col, Form, Button, Modal, Row, Input, DatePicker, Select } from 'antd';
const R = require('ramda');
import { message } from "antd";
const FormItem = Form.Item;
import BizParams from '../../components/commons/BizParams';
import AreaSelect from '../../components/commons/AreaSelect';
import ManageSelect from '../../components/commons/ManageSelect';
import Constants from '../../utils/Constants';
import moment from 'moment'
const dateFormat = 'YYYY-MM-DD';

export default Form.create({ wrappedComponentRef: true })(class VipInvoiceRecord extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            open: false,
            searchConditions: {},
            disabled: true,
            record: {},
            subDisabled: true,
            saveLoading: false,
            type:"edit",
        };
    }

    handleOpen = (disabled, subDisabled, searchConditions, record,type) => {
        this.setState({ open: true, disabled: disabled, subDisabled: subDisabled, searchConditions: searchConditions, record: record,type:type });
    }

    handleCancel = () => {
        this.props.form.resetFields();
        this.setState({ open: false });
    }


    handleSave = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            this.setState({ saveLoading: true });
            values.id = R.isNil(this.props.dataSource) ? null : this.props.dataSource.id;
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
            if (!R.isNil(values.area) && !R.isEmpty(values.area)) {
                values.province = values.area[0];
                values.city = values.area[1];
                values.district = values.area[2];
            }
            values.register=dataSource.register;
            this.props.dispatch({
                type: 'vipManage/updateInvoiceRecord',
                payload: {
                    dataSource: values,
                    onSuccess: () => {
                        this.setState({saveLoading: false})//button loading revert
                        this.handleCancel();//close modal window
                        this.props.dispatch({
                            type: 'vipManage/queryInvoiceRecords',
                            payload: this.state.searchConditions
                        })
                    },
                    onFail: () => this.setState({saveLoading: false})
                }
            });
        })
    }

    render() {
        let formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 17 } };
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        const { getFieldDecorator } = this.props.form;
        let area = [];
        R.isNil(dataSource.province) ? "" : area.push(dataSource.province);
        R.isNil(dataSource.city) ? "" : area.push(dataSource.city);
        R.isNil(dataSource.district) ? "" : area.push(dataSource.district);
        let footer = [
            <Button key="save" size="large" loading={this.state.saveLoading} disabled={this.state.disabled && this.state.subDisabled || this.state.saveLoading} onClick={() => this.handleSave()}>保存</Button>,
            <Button key="cancel" size="large" disabled={this.state.disabled && this.state.subDisabled || this.state.saveLoading} onClick={this.handleCancel.bind(this)}>取消</Button>
        ];

 
        return (
            <Modal maskClosable={false} footer={this.state.disabled && this.state.subDisabled ? null : footer} visible={this.state.open} title={"开票信息"} width={800} wrapClassName="vertical-center-modal" onCancel={this.handleCancel.bind(this)}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="客户名称" hasFeedback>
                                {getFieldDecorator('cstName', {
                                    rules: [{
                                        required: true, message: '请输入客户名称'
                                    }],
                                    initialValue: dataSource.cstName
                                })(
                                    <Input maxLength="100" disabled={this.state.disabled || this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="纳税人识别号" hasFeedback>
                                {getFieldDecorator('taxesnum', {
                                    rules: [{
                                        required: true, message: '请输入纳税人识别号'
                                    }],
                                    initialValue: dataSource.taxesnum
                                })(
                                    <Input maxLength="100" disabled={this.state.disabled || this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="发票类型" hasFeedback>
                                {getFieldDecorator('invoiceType', {
                                    rules: [{
                                        required: true, message: '请选择发票类型'
                                    }],
                                    initialValue: dataSource.invoiceType
                                })(
                                    <BizParams sprCode='invoice' disabled={this.state.disabled || this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="开票金额" hasFeedback>
                                {getFieldDecorator('inoviceAmt', {
                                    rules: [{
                                        required: true, message: '请输入开票金额'
                                    }],
                                    initialValue: dataSource.inoviceAmt
                                })(
                                    <Input maxLength="100" disabled={this.state.disabled || this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>                    
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="开户银行" hasFeedback>
                                {getFieldDecorator('openingbank', {
                                    rules: [{
                                        required: true, message: '请输入开户银行',
                                    }],
                                    initialValue: dataSource.openingbank
                                })(
                                    <Input maxLength="20" disabled={this.state.disabled || this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="银行账号" hasFeedback>
                                {getFieldDecorator('bankaccount', {
                                    rules: [{
                                        required: true, message: '请输入银行账号',
                            
                                    }],
                                    initialValue: dataSource.bankaccount
                                })(
                                    <Input maxLength="50" disabled={this.state.disabled || this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="发票区域" hasFeedback>
                                {getFieldDecorator('area', {
                                    rules: [{
                                        required: true, message: '请选择发票区域(省市区)',
                                    }],
                                    initialValue: area
                                })(
                                    <AreaSelect maxLength="50" disabled={this.state.disabled || this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="详细地址" hasFeedback>
                                {getFieldDecorator('address', {
                                    rules: [{
                                        required: true, message: '请输入详细地址',
                                    }],
                                    initialValue: dataSource.address
                                })(
                                    <Input maxLength="100" disabled={this.state.disabled || this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="联系电话" hasFeedback>
                                {getFieldDecorator('telephone', {
                                    rules: [{
                                        required: true, message: '请输入联系电话',
                                    }],
                                    initialValue: dataSource.telephone
                                })(
                                    <Input maxLength="50" disabled={this.state.disabled || this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="开票时间" hasFeedback>
                                {getFieldDecorator('invoiceTime', {
                                    rules: [{
                                        required: true, message: '请选择开票时间',
                                    }],
                                        initialValue: dataSource.invoiceTime== undefined ? '' : moment(dataSource.invoiceTime, dateFormat)
                                })(
                                    <DatePicker disabled={this.state.disabled || this.state.subDisabled}/>
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="状态" hasFeedback>
                                {getFieldDecorator('status', {
                                    rules: [{
                                        required: true, message: '请选择状态',
                                    }],
                                    initialValue: dataSource.status
                                })(                                    
                                    <Select disabled={this.state.disabled && this.state.subDisabled} >
                                        <option value={"1"}>待开票</option>
                                        <option value={"2"}>已发送</option>    
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="发票号" hasFeedback>
                                {getFieldDecorator('inoviceNum', {
                                    rules: [{
                                        required: true, message: '请输入发票号',
                                    }],
                                    initialValue: dataSource.inoviceNum
                                })(
                                    <Input maxLength="100" disabled={this.state.disabled && this.state.subDisabled} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    }
})